<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css" />
		<script type="text/javascript" src="js/mui.min.js"></script>
		<style type="text/css">
			ul.data-list-box {
				position: relative;
				list-style: none;
				margin-bottom: 0;
				padding-left: 0;
				margin-top: 0;
			}
			.item-box {
				padding: 15px;
				overflow: hidden;
				position: relative;
				border-radius: 5px;
				margin: 10px 10px 0;
				background-color: #ffffff;
			}
			.item-box-inner {
				width: 100%;
			}
			.item-left, .item-right, .item-title-left, .item-title-right {
				float: left;
			}
			.item-left, .item-title-left {
				text-align: left;
				width: calc(100% - 60px);
			}
			.item-right, .item-title-right {
				width: 60px;
				text-align: right;
			}
			.item-title {
				height: 25px;
				font-size: 15px;
				text-align: left;
				font-weight: bold;
				line-height: 25px;
				margin-bottom: 10px;
			}
			.item-title-left, .item-title-right, .item-title-right .mui-icon {
				font-size: 15px;
				font-weight: bold;
			}
			.item-title-right {
				font-weight: normal;
			}
			
			/************ 多行文本溢出显示省略号 *** 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端****************/
			.item-content {
				color: #666666;
				font-size: 13px;
				line-height: 20px;
				line-clamp: 2;
				display: -webkit-box;
				-webkit-line-clamp: 2;  /***** 控制要显示的行数  超出的显示省略号 *****/
				-webkit-box-orient: vertical;
				text-overflow: -o-ellipsis-lastline;
				text-overflow: ellipsis;
				overflow: hidden;
			}
/************ 多行文本溢出显示省略号 ****************/
			.item-footer {
				width: 100%;
				color: #999999;
				font-size: 12px;
				line-height: 16px;
				margin: 6px 0 0 0;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<ul class="data-list-box">
		    <li class="item-box">
		        <div class="item-title">信息化推进办公室张彦合同付款信息化</div>
		        <div class="item-content">申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四申请人：李四</div>
		        <p class="item-footer mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
			</li>
		</ul>
	</body>
</html>
